<template>
  <v-text-field
    ref="baseNumberComponent"
    v-model="numberValue"
    class="customBaseNumber"
    :label="config.label"
    :placeholder="$t('formConfig.placeholder') + config.label"
    :rules="rules"
    :dense="config.dense"
    :solo="config.solo"
    :solo-inverted="config.soloInverted"
    :outlined="config.outlined"
    :single-line="config.singleLine"
    required
    hint="例如:-1,0,1"
    persistent-hint
    @input="valueInput"
    @change="valueChange"
    @blur="inputNumberBlur"
  >
    <v-icon slot="prepend-inner" color="green" @click="minus">
      mdi-minus
    </v-icon>
    <v-icon slot="append" color="red" @click="addition">
      mdi-plus
    </v-icon>
  </v-text-field>
</template>

<script>
import { isEmptyValue } from '@/utils/tools'
export default {
  // 数字组件
  name: 'BaseNumber',

  props: {
    // 配置信息
    configItem: { type: Object, default: () => {} },
    // 表单值
    value: { type: undefined, default: undefined },
    // 隐藏信息
    hideDetail: { type: Boolean, default: false },
    // 不校验规则
    hideRules: { type: Boolean, default: false }
  },

  data() {
    return {
      // 重定向配置信息
      config: this.configItem,
      // 数字组件当前值
      numberValue: this.value
    }
  },

  computed: {
    rules() {
      return this.config.rules
    }
  },

  watch: {
    value(nv) {
      this.numberValue = nv
    }
  },

  created() {
    this.setDefaultNumber()
  },

  methods: {
    // 设置默认值
    setDefaultNumber() {
      this.numberValue = 0
      this.$emit('input', parseFloat(0))
    },
    // 双向绑定
    valueInput(value) {
      /**
       * 1.如果 value 为 空, 传递 value
       * 2.如果 value 为 -, 传递 value
       * 3.如果 value 不是一个数字, 重置为 0, 传递 0
       * 4.正常情况 value 是一个数字, 传递 value
       */

      if (isEmptyValue(value)) {
        this.$emit('input', value)
      } else if (value === '-') {
        this.$emit('input', value)
      } else if (isNaN(value)) {
        this.numberValue = 0
        this.$refs.baseNumberComponent.lazyValue = this.numberValue
        //   this.$refs.baseNumberComponent._data.valid = true
        this.$emit('input', 0)
      } else {
        this.$emit('input', parseFloat(value))
      }
    },
    /**
     * number 值改变时触发
     */
    valueChange(value) {
      this.$emit('valueChangeEmit', value)
    },
    /**
     * 数字组件失去焦点时 判断 value 是否是空值 或者 不是数字类型
     * 是的话 重定向为0
     */
    inputNumberBlur() {
      ;(isEmptyValue(this.numberValue) || isNaN(this.numberValue)) && (this.numberValue = 0)
    },

    minus() {
      this.numberValue--
      this.$emit('input', this.numberValue)
    },

    addition() {
      this.numberValue++
      this.$emit('input', this.numberValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.customBaseNumber {
  ::v-deep .v-text-field__slot {
    .v-label {
      width: 100%;
    }

    .v-label,
    input {
      text-align: center;
    }
  }
}
</style>
